<!--  -->
<template>
  <div class="AD-picture" v-loading="loading">
    <HeaderTop title="广告图"></HeaderTop>
    <div class="AD-container">
      <ul class="AD-ul" style="width:100%; height: 1000px; overflow: auto;">
        <li class="AD-li" v-for="(item,index) in bannerList" :key="index">
          <div class="dot"></div>
          <div class="AD-item">
            <div class="AD-img">
              <img :src="item.imageUrl" width="100%">
            </div>
            <Button class="AD-btn" @click="changeImg(index)">更换</Button>
            <Modal class="model" v-model="modal2" width="420" height="386" :mask-closable="false" :styles="{top:'360px',left:'180px'}">
              <p slot="header" style="width:420px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
                <span>更换广告图</span>
              </p>
              <div style="text-align:center">
                <UploadFileView v-model="currFile" v-if="modal2" />
                <p style="color:#D2D2D2;padding-top:10px">*图片宽度750像素，高度为420像素</p>
              </div>
              <div slot="footer">
                <Button class="btn" style="background:#145B3E;color:#fff;width:180px;text-align:center;margin-right:100px" @click="xmTanUploadImg">确认</Button>
              </div>
            </Modal>
          </div>
          <div style="padding: 20px">
            <el-input v-model="item.goodsNo" placeholder="请输入商品编号" style="width: 65%"></el-input>
            <Button class="AD-btn" @click="changeUrl(index, item)">绑定商品编号与广告图</Button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
import UploadFileView from '@/components/UploadFile/UploadFileView'
export default {
  data () {
    return {
      loading: false,
      modal2: false,
      imageUrl: '',
      bannerList: [],
      currId: 1,
      imgUrl: '',
      currFile: {}
    }
  },

  components: {
    HeaderTop,
    UploadFileView
  },

  computed: {},

  created () {
    this.getBannerList()
  },

  methods: {
    
    async getBannerList () {
      const params = {
        token: sessionStorage.getItem('token'),
        managerInfoId: sessionStorage.getItem('userId')
      }
      console.log(params)
      this.loading = true
      const result = await this.API.reqShufflingImgList(params)
      this.loading = false
      if (result.retCode !== '000') {
        return false
      }
      this.bannerList = result.retData
      console.log('广告列表', result)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    changeImg (index) {
      this.modal2 = true
      this.currId = index + 1
      // this.$refs.child1.childMethod(this.flag)
    },
    async changeUrl (index, item) {
      const params = {
        managerInfoId: sessionStorage.getItem('userId'),
        token: sessionStorage.getItem('token'),
        shufflingImgId: index + 1,
        goodsNo: item.goodsNo
      }
      console.log(params)
      const result = await this.API.reqRelationGoods(params)
      console.log(result)
      if (result.retCode !== '000') {
        this.$message.error('绑定失败')
        return false
      }
      this.getBannerList()
      this.$message.success('绑定成功')
    },
    async xmTanUploadImg () {
      var formData = new FormData()
      formData.append('img', this.currFile)
      formData.append('token', sessionStorage.getItem('token'))
      formData.append('shufflingImgId', this.currId)
      formData.append('managerInfoId', sessionStorage.getItem('userId'))
      const result = await this.API.reqUpdateShufflingImg(formData)
      this.modal2 = false
      this.getBannerList()
    },
  }
}

</script>
<style lang='stylus'>
  .ivu-modal-mask
    background rgba(27,27,27,.1)
  .ivu-modal-content
    overflow hidden
    .ivu-modal-header
      padding 0
      border none
      span
        margin-left 10px
        font-weight bold
    .ivu-modal-footer
      border none
    //   background #E0E0E0
    //   // width 420px
    //   // height 62px
    //   // line-height 62px
</style>


<style lang='stylus' scoped>
  .AD-container
    padding-top 20px
    display flex
    justify-content center
    .AD-ul
      display flex
      justify-content center
      flex-wrap wrap
      background #fff
      width 1521px
      border-top-left-radius 15px
      border-top-right-radius 15px
      padding-left 80px
      padding-top 50px
      .AD-li
        position relative
        width 589px
        height 430px
        border 1px solid #D8E2F0
        box-shadow 0 0 10px #D8E2F0
        border-radius 5px
        align-items center
        margin-right 50px
        margin-bottom 20px
        .dot
          position absolute
          width 17px
          height 17px
          border 4px solid #145B3E
          border-radius 50%
          top 25px
          right 18px
        .AD-item
          .AD-img
            width 494px
            height 254px
            background #EAEFF3
            margin-top 50px
            margin-left 45px
          .AD-btn
            width 104px
            height 42px
            outline none
            border none
            background #145B3E
            color #fff
            margin-left 240px
            margin-top 10px
            border-radius 5px
</style>